
<template>
  <div id="app" :class="theme">
    <div class="header">
      <div class="header_top">
        <div class="logo">
          <img src="@imgs/Logo.png" alt="logo" />
        </div>
        <div class="header-right">上周榜单</div>
      </div>
      <div class="header_bottom">总监一周一维护</div>
    </div>
    <div class="TOP">
      <div class="podium">
        <div class="TOP2">
          <img src="@imgs/Leaderboards/di2.png" alt="第二名" />
          <div>
            <p>
              {{ data[1]?.name }}
            </p>
          </div>
        </div>
        <div class="TOP1">
          <img src="@imgs/Leaderboards/di1.png" alt="第一名" />
          <div>
            <p>
              {{ data[0]?.name }}
            </p>
          </div>
        </div>
        <div class="TOP3">
          <img src="@imgs/Leaderboards/di3.png" alt="第三名" />
          <div>
            <p>
              {{ data[2]?.name }}
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="leaderboard">
      <div class="leaderboard-table-border">
        <table>
          <thead>
            <tr>
              <th v-for="item in columns" :key="item.index">
                {{ item.title }}
              </th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in data" :key="index">
              <td>
                {{ index + 1 }}
              </td>
              <td>
                {{ item.name }}
              </td>
              <!-- <td>
                {{ item.agentcode }}
              </td> -->
              <td>
                {{ item.branch }}
              </td>
              <td>
                {{ item.counts }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  onBeforeMount,
  onMounted,
  onUnmounted,
  watch,
  computed,
  provide,
  inject,
  ref,
  reactive,
  nextTick,
  h
} from 'vue'
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
const dayjs = inject('$dayjs')
const showPageLoading = inject('showPageLoading')
const hidePageLoading = inject('hidePageLoading')
const showAllNonBaseMenuItem = inject('showAllNonBaseMenuItem')
const hideAllNonBaseMenuItem = inject('hideAllNonBaseMenuItem')
import { directorsPreserveTop } from '@/request/api.js'
onBeforeMount(() => {
  hideAllNonBaseMenuItem()
  agentcode.value = route.query.agentcode
  getdirectorSatement()
})
onMounted(() => {})

//请求数据
const theme = ref('default') // default,saffron
const agentcode = ref('')

/**
 * 工号
 * 姓名
 * 中支
 * 数量
 */
// @Data
// public class TopList {
// 	private String agentcode;
// 	private String name;
// 	private String branch;
// 	private int counts;
// }
const columns = ref([
  {
    title: '排名',
    key: 'index'
  },
  {
    title: '姓名',
    key: 'name'
  },
  // {
  //   title: '工号',
  //   key: 'agentcode'
  // },
  {
    title: '中支',
    key: 'branch'
  },
  {
    title: '数量',
    key: 'counts'
  }
])
const data = ref([])
function getdirectorSatement() {
  showPageLoading()
  directorsPreserveTop({
    agentcode: agentcode.value
  }).then((r) => {
    hidePageLoading()
    if (r.status == 200) {
      data.value = r.data
    } else {
      console.log('出错了，请重试')
      alert('出错了，请重试')
    }
  })
}
</script>
<style lang="less" scoped>
.default {
  .theme(); //默认的样式
}

.saffron {
  .theme(@themeBackgroundColor: rgb(255, 216, 184), //背景颜色
        @themeFontColor: #ffffff, //主题字体颜色
        @headerRightColor: #fff, //榜单名颜色
        @headerBackgroundUrl: '@imgs/Leaderboards/hongseduocai.jpg', //头部背景图片
        @toggleButtonBorderColor: #FFFFCC, //本周按钮边框颜色
        @toggleButtonBackgroundLinearColor1: #fff, //本周按钮背景样色渐变第1颜色
        @toggleButtonBackgroundLinearColor2: #fff, //本周按钮背景样色渐变第2颜色
        @toggleButtonBackgroundLinearColor3: #fff, //本周按钮背景样色渐变第3颜色
        @toggleButtonFontColor: #006363, //本周按钮边字体颜色
        @toggleActiveButtonFontColor: #fff, //当前本周按钮边字体颜色
        @toggleActiveButtonBackgroundLinearColor1: #006363, //当前本周按钮背景样色渐变第1颜色
        @toggleActiveButtonBackgroundLinearColor2: #006363, //当前本周按钮背景样色渐变第2颜色
        @tableBodyFontColor: #006363, //表格表头背景色、表格内容字体色;
        @top3NameColor: yellow, //前3名字颜色
        @top3NameFontSize: 18px, //前3名字大小
        @top3OtherColor: #fff, //前3其他字体颜色
        @top3OtherFontSize: 12px //前3其他字体大小
    );
}

.theme(@themeBackgroundColor: rgb(230, 231, 228), //背景颜色
    @themeFontColor: #ffffff, //主题字体颜色
    @headerRightColor: #fff, //榜单名颜色
    @headerBackgroundUrl: '@imgs/Leaderboards/caisebeijing.jpg', //头部背景图片
    @toggleButtonBorderColor: rgb(255, 255, 255), //本周按钮边框颜色
    @toggleButtonBackgroundLinearColor1: #fff, //本周按钮背景样色渐变第1颜色
    @toggleButtonBackgroundLinearColor2: #fff, //本周按钮背景样色渐变第2颜色
    @toggleButtonBackgroundLinearColor3: #fff, //本周按钮背景样色渐变第3颜色
    @toggleButtonFontColor: rgb(27, 27, 27), //本周按钮字体颜色
    @toggleActiveButtonFontColor: #fff, //当前本周按钮边字体颜色
    @toggleActiveButtonBackgroundLinearColor1: rgb(27, 27, 27), //当前本周按钮背景样色渐变第1颜色
    @toggleActiveButtonBackgroundLinearColor2: rgb(27, 27, 27), //当前本周按钮背景样色渐变第2颜色
    @tableBodyFontColor: rgb(27, 27, 27), //表格表头背景色、表格内容字体色;
    @top3NameColor: yellow, //前3名字颜色
    @top3NameFontSize: 18px, //前3名字大小
    @top3OtherColor: #fff, //前3其他字体颜色
    @top3OtherFontSize: 12px//前3其他字体大小

) {
  height: 100%;
  min-height: 100vh;
  background: linear-gradient(
    to bottom,
    @themeBackgroundColor,
    lighten(@themeBackgroundColor, 10%)
  );

  .select {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 80px;
    height: 20px;
    border-radius: 2px;
    outline: none;
    color: #fff;
    text-align: center;
    line-height: 20px;
    background-color: @themeBackgroundColor;
  }

  .header {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.4); /* 半透明背景 */
    backdrop-filter: blur(10px); /* 毛玻璃效果 */
    -webkit-backdrop-filter: blur(10px); /* Safari 兼容 */
    .header_top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .logo {
        width: 160px;
        margin-top: 10px;
        margin-left: 10px;
        img {
          width: 100%;
          height: 100%;
        }
      }

      .header-right {
        margin-right: 10px;
        text-shadow: 2px 3px 2px #0b0d3d;
        font-size: 29px;
        color: @headerRightColor;
        text-align: end;
        font-weight: bold;
        margin-bottom: 8px;
      }
    }
    .header_bottom {
      margin-right: 10px;
      text-shadow: 2px 3px 2px #0b0d3d;
      font-size: 29px;
      color: @headerRightColor;
      text-align: end;
      font-weight: bold;
      margin-bottom: 8px;
    }
  }

  .TOP {
    position: relative;
    border-radius: 10px 10px 0 0;
    // background: linear-gradient(
    //   to bottom,
    //   @themeBackgroundColor,
    //   lighten(@themeBackgroundColor, 4%)
    // );
    background: rgba(255, 255, 255, 0.4); /* 半透明背景 */
    backdrop-filter: blur(10px); /* 毛玻璃效果 */
    -webkit-backdrop-filter: blur(10px); /* Safari 兼容 */

    .toggle {
      display: flex;
      justify-content: space-around;
      margin-bottom: 20px;

      button {
        width: 90px;
        height: 25px;
        border-radius: 5px;
        outline: none;
        border: 1px solid @toggleButtonBorderColor;
        background: linear-gradient(
          to bottom right,
          @toggleButtonBackgroundLinearColor1,
          @toggleButtonBackgroundLinearColor2,
          @toggleButtonBackgroundLinearColor3
        );

        color: @toggleButtonFontColor;
        text-align: center;
        font-weight: bold;
        line-height: 18px;

        &:active {
          -webkit-transform: translate(1px, 1px);
          transform: translate(1px, 1px);
        }
      }

      .active-button {
        background: linear-gradient(
          to bottom right,
          @toggleActiveButtonBackgroundLinearColor1,
          @toggleActiveButtonBackgroundLinearColor2
        );
        color: @toggleActiveButtonFontColor;
      }
    }

    .podium {
      background: url('@imgs/Leaderboards/podium.png') no-repeat;
      background-size: 300px 230px;
      position: relative;
      margin: 0 auto;
      width: 300px;
      display: flex;
      justify-content: space-around;

      p {
        width: 75px;
        margin: 5px 0;
        line-height: 20px;
      }

      .TOP1 {
        margin-top: 30px;
        text-align: center;

        img {
          width: 70px;
          height: 70px;
        }

        div {
          margin-top: 10px;
          color: #ffffff;

          p:first-child {
            font-size: @top3NameFontSize;
            color: @top3NameColor;
          }

          p {
            font-size: @top3OtherFontSize;
            color: @top3OtherColor;
          }
        }
      }

      .TOP2 {
        margin-top: 77px;
        text-align: center;

        img {
          width: 60px;
          height: 60px;
        }

        div {
          margin-top: 10px;
          color: #ececec;

          p:first-child {
            font-size: @top3NameFontSize;
            color: @top3NameColor;
          }

          p {
            font-size: @top3OtherFontSize;
            color: @top3OtherColor;
          }
        }
      }

      .TOP3 {
        margin-top: 83px;
        text-align: center;

        img {
          width: 55px;
          height: 55px;
        }

        div {
          margin-top: 10px;
          color: #ffffff;

          p:first-child {
            font-size: @top3NameFontSize;
            color: @top3NameColor;
          }

          p {
            font-size: @top3OtherFontSize;
            color: @top3OtherColor;
          }
        }
      }
    }
  }

  .leaderboard {
    padding: 0 10px 20px;

    .leaderboard-table-border {
      padding: 5px 2px;
      border: 2px solid @tableBodyFontColor;
      border-radius: 5px;
      background: rgba(255, 255, 255, 0.4); /* 半透明背景 */
      backdrop-filter: blur(10px); /* 毛玻璃效果 */
      -webkit-backdrop-filter: blur(10px); /* Safari 兼容 */

      table {
        width: 100%;

        thead {
          color: @themeBackgroundColor;
          font-size: 13px;

          tr {
            th {
              vertical-align: middle;
              background-color: @tableBodyFontColor;
              font-weight: bold;
              line-height: 30px;
              text-align: center;
              border-radius: 2px;
              border-right: 1px solid @themeBackgroundColor;
              word-wrap: break-word;
              word-break: break-all;
            }

            th:last-child {
              border-right: none;
            }
          }
        }

        tbody {
          tr {
            border-bottom: 1px dashed @tableBodyFontColor;

            td {
              max-width: 100px;
              font-size: 16px;
              word-break: break-all;
              text-align: center;
              vertical-align: middle;
              border-left: none;
              border-right: none;
              padding: 20px 0 5px 0;
              color: @tableBodyFontColor;
            }
          }
        }
      }
    }
  }
}
</style>
